<template>
	<view>
		<picker
			mode="multiSelector"
			:value="chooseAreaIndex"
			:range="areaArray"
			range-key="name"
			class="picker-container"
			@change="changeArea"
			@columnchange="changeAreaColumn"
			@tap="initData"
		>
			<view class="choose-content-container">
				<view class="choose-content">{{ showAreaName }}</view>
			</view>
		</picker>
	</view>
</template>

<script>
import { common } from '@/pagesA/utils/common.js';
const app = getApp();
export default {
	data() {
		return {
			chooseAreaIndex: [0, 0, 0],
			areaArray: [],
			showAreaName: ''
		};
	},
	props: {
		initArea: {
			type: Array
		},
		initAreaName: {
			type: String
		}
	},
	mounted() {
		// 处理小程序 attached 生命周期
		this.attached();
	},
	methods: {
		attached() {
			this.getArea();
		},
		initData() {
			if (this.initArea.length != 0 && this.areaArray.length != 0) {
				let provinceIndex = this.handleChooseAreaIndex(this.areaArray[0], 0);
				let cityIndex = this.handleChooseAreaIndex(this.areaArray[0][provinceIndex].cityList, 1);
				let townIndex = this.handleChooseAreaIndex(this.areaArray[0][provinceIndex].cityList[cityIndex].areaList, 2);
				// this.setData({
				// 	'areaArray[1]': this.areaArray[0][provinceIndex].cityList,
				// 	'areaArray[2]': this.areaArray[0][provinceIndex].cityList[cityIndex].areaList
				// });
				this.areaArray[1] = this.areaArray[0][provinceIndex].cityList;
				this.areaArray[2] = this.areaArray[0][provinceIndex].cityList[cityIndex].areaList;
				setTimeout(() => {
					// this.setData({
					// 	chooseAreaIndex: this.chooseAreaIndex
					// });
					this.chooseAreaIndex = [provinceIndex, cityIndex, townIndex];
				}, 100);
			}
		},

		handleChooseAreaIndex(list, index) {
			for (let i = 0; i < list.length; i++) {
				if (this.initArea[index] == list[i].code) {
					return i;
				}
			}
		},
		getArea() {
			common.apis.project.getArea().then((res) => {
				if (!res.data) {
					return;
				}
				// this.setData({
				// 	areaArray: [res.data.areaList, res.data.areaList[0].cityList, res.data.areaList[0].cityList[0].areaList]
				// });
				this.areaArray = [res.data.areaList, res.data.areaList[0].cityList, res.data.areaList[0].cityList[0].areaList];
			});
		},
		changeAreaColumn(e) {
			const moveColumn = e.detail.column;
			const currentIndex = e.detail.value;
			let cityArr = this.areaArray[1];
			let townArr = this.areaArray[2];
			switch (moveColumn) {
				case 0:
					cityArr = this.areaArray[0][currentIndex].cityList;
					townArr = cityArr[0].areaList;
					// this.setData({
					// 	'areaArray[1]': cityArr,
					// 	'areaArray[2]': townArr,
					// 	'chooseAreaIndex[0]': currentIndex,
					// 	'chooseAreaIndex[1]': 0,
					// 	'chooseAreaIndex[2]': 0
					// });
					this.areaArray[1] = cityArr;
					this.areaArray[2] = townArr;
					this.chooseAreaIndex[0] = currentIndex;
					this.chooseAreaIndex[1] = 0;
					this.chooseAreaIndex[2] = 0;
					break;
				case 1:
					townArr = this.areaArray[1][currentIndex].areaList;
					// this.setData({
					// 	'areaArray[2]': townArr,
					// 	'chooseAreaIndex[1]': currentIndex,
					// 	'chooseAreaIndex[2]': 0
					// });
					this.areaArray[2] = townArr;
					this.chooseAreaIndex[1] = currentIndex;
					this.chooseAreaIndex[2] = 0;
					break;
				case 2:
					// this.setData({
					// 	'chooseAreaIndex[2]': currentIndex
					// });
					this.chooseAreaIndex[2] = currentIndex;
					break;
			}
		},

		changeArea(e) {
			let chooseArea = {
				name: [],
				code: []
			};
			chooseArea.name = [this.areaArray[0][this.chooseAreaIndex[0]].name, this.areaArray[1][this.chooseAreaIndex[1]].name, this.areaArray[2][this.chooseAreaIndex[2]].name];
			chooseArea.code = [this.areaArray[0][this.chooseAreaIndex[0]].code, this.areaArray[1][this.chooseAreaIndex[1]].code, this.areaArray[2][this.chooseAreaIndex[2]].code];
			// this.setData({
			// 	showAreaName: chooseArea.name.join('')
			// });
			this.showAreaName = chooseArea.name.join('');
			this.$emit('choosearea', {
				detail: chooseArea
			});
		}
	},
	created: function () {},
	watch: {
		initAreaName: {
			handler: function (val) {
				if (val) {
					// this.setData({
					// 	showAreaName: val
					// });
					this.showAreaName = val;
				}
			},

			immediate: true
		}
	}
};
</script>
<style>
.picker-container {
	width: 100%;
	height: 100%;
}

.choose-content-container {
	height: 116rpx;
	display: flex;
	align-items: center;
}

.choose-content-container .choose-content {
	flex: 1;
	height: 100%;
	color: #4b5680;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
</style>